<!--
  Copyright (c) 2011 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://www.apache.org/licenses/LICENSE-2.0.html
--><!DOCTYPE html>
<html>
<head>

  <!-- Style -->
  <style type="text/css">
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    #map_canvas {
      height: 400px;
      width: 100%;
    }
  </style>

  <!-- Google Maps API javascript -->
  <script type="text/javascript"
          src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">

    var style = [
      { featureType: "poi", elementType: "all", stylers: [
        { visibility: "off" }
      ] },
      { featureType: "water", elementType: "all", stylers: [
        { visibility: "simplified" },
        { lightness: -9 },
        { saturation: -92 }
      ] },
      { featureType: "transit", elementType: "all", stylers: [
        { visibility: "simplified" }
      ] },
      { featureType: "administrative", elementType: "labels", stylers: [
        { visibility: "on" }
      ] }
    ];

    var presets = [
      { tableId: 136705,
        tableName: 'Brazil Beaches',
        sampleQuery: ''
      },
      { tableId: 900437,
        tableName: 'AU Toilets'
      },
      { tableId: 900603,
        tableName: 'UK Transit',
        sampleQuery: ''
      },
      { tableId: 900437,
        tableName: 'AU Toilets - x closest',
        sampleQuery: "select lat from 900437 order by ST_DISTANCE(lat, LATLNG(-33.86669186121351, 151.19588613510132)) limit 300"
      },
      { tableId: 290985,
        tableName: 'Congressional Districts Demographics',
        sampleQuery: "select shape from 290985 where 'Median Age of the Total Population' > 30"
      },
      { tableId: 290985,
        tableName: 'Congressional Districts Demographics - bounding box',
        sampleQuery: "select shape from 290985 where 'Median Age of the Total Population' > 30 and ST_INTERSECTS(shape, RECTANGLE(LATLNG(32.528832,-124.482003), LATLNG(42.009517,-114.131211)))"
      }
    ];

    var tableid = 287421; //the table id
    var layer = new google.maps.FusionTablesLayer(tableid); //create a new FusionTablesLayer

    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(37.25, -99.84), //the center lat and long
        zoom: 1, //zoom
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style']
        },
        mapTypeId: 'style'
        //the map style
      });

      var styledMapOptions = {
        name: "Styled"
      };

      var mapType = new google.maps.StyledMapType(style, styledMapOptions);

      map.mapTypes.set('style', mapType);

      layer.setQuery("SELECT 'shape' FROM " + tableid); //set the initial query to Fusion Tables
      layer.setMap(map);

      var presetSelect = document.getElementById("preset");
      for (var i = 0; i < presets.length; i++) {
        var preset = presets[i];
        var option = document.createElement("option");
        option.appendChild(document.createTextNode(preset.tableName));
        option.setAttribute("value", preset.tableId);
        presetSelect.appendChild(option);
      }

      setPreset(presets[0].sampleQuery, presets[0].tableId);
    }

    function setPreset(query, tableId) {
      document.getElementById('query').value = query;
      changeQuery(tableId);
    }

    function changeQuery(tableid) {
      var query = document.getElementById('query').value;

      if (tableid != undefined) {
        layer.setTableId(parseInt(tableid));
      }
      layer.setQuery(query);
    }

    function changePreset() {
      var selectedPreset = document.getElementById("preset").selectedIndex;
      setPreset(presets[selectedPreset].sampleQuery,
                presets[selectedPreset].tableId);
    }

    function updateHeatmap() {
      var heatmap = document.getElementById('heatmap');
      layer.set('heatmap', heatmap.checked);
    }


  </script>

</head>
<body onload="initialize();">
<form>
  <select id="preset" onchange="changePreset()"></select> <input id="heatmap" type="checkbox"onclick="updateHeatmap()"/>Enable
  heatmap
  <br/>
  <textarea id="query" onchange="changeQuery()" cols="80" rows="1"></textarea>
</form>

<div id="map_canvas"></div>

</body>
</html>